<template>
    <div id="demo" class="carousel slide" data-ride="carousel">
      
    <!-- 登录模态框 -->
<div class="modal fade" id="myModal" v-show="aaaa">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <button type="button" class="btn btn-primary" @click="blockornone('login')">登录</button>
      <button type="button" class="btn btn-primary" @click="blockornone('zhuce')">注册</button>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
       <el-form id="b1" ref="Login" v-model="tbalefff" label-width="100px" class="demo-ruleForm">
  <el-form-item   label="用户名" prop="name">
    <el-input v-model="tbalefff.name"  @blur="name"></el-input>
      <el-span v-show="cc">用户名不能为空</el-span>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio v-model="tbalefff.sex" label="男">男</el-radio>
    <el-radio v-model="tbalefff.sex" label="女">女</el-radio>
  </el-form-item>
  <el-form-item label="身份证号" prop="idCard">
    <el-input v-model="tbalefff.idCard" @blur="blur"  maxlength="18"></el-input>
    <el-span v-show="cca">身份证不能为空</el-span>
    <el-span v-show="ccg">身份证不能小于18位</el-span>
  </el-form-item>
  <el-form-item label="电话号码" prop="phoneNumber">
    <el-input v-model="tbalefff.phoneNumber" @blur="phoneNumber"  maxlength="11"></el-input>
    <el-span v-show="ccb">电话号码不能为空</el-span>
    <el-span v-show="cch">电话号码不能小于11位</el-span>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="tbalefff.password"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model="tbalefff.age" @blur="age"></el-input>  
    <el-span v-show="cce">年龄不能为空</el-span>
    <el-span v-show="cci">年龄不小于等于0</el-span>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="tbalefff.email" @blur="email"></el-input>
    <el-span v-show="ccf">邮箱不能为空</el-span>
    <el-span>邮箱必须包含@</el-span>
  </el-form-item>
  <el-button type="success" @click="loginzhuce" round  >注册</el-button>
  </el-form>
   <el-form id="b2"  label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="$store.state.Login.name" ></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="$store.state.Login.password"></el-input>
  </el-form-item>
  <el-button type="success" @click="loginshow"  round data-dismiss="modal">登录</el-button>
</el-form>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <span>已有账户请直接登录,若没有请先注册</span>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <img class="navbar-brand" src="../img/logo2.jpg" id="a1">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>
      <!-- 登录注册按钮 -->
      <div class="a">
      <div class="btn-group btn-group-xl">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">📞立即预约</button>
      </div>
      </div>

 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../img/a.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/c.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/d.jpg">
        <!-- 指示符 -->
    </div>
    <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
    <!-- 左右切换按钮 -->
  <a class="carousel-control-prev"  href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  </div>

  <div id="a2">
    <h3>🐅我们的团队</h3>
  </div>
  <div class="row">
    <div class="col-4">
      <img src="../img/lf.jpg" class="a3" >
      <h6>萨姆·刘飞</h6>
      <span>山姆是维加诺的创始人兼首席执行官。</span>
    </div>
    <div class="col-4">
      <img src="../img/hrrr.jpg" class="a3">
      <h6>简·小胡</h6>
      <span>山姆是维加诺的创始人兼首席执行官。</span>
    </div>
    <div class="col-4">
      <img src="../img/yb.jpg" class="a3">
      <h6>斌大佐</h6>
      <span>山姆是维加诺的创始人兼首席执行官。</span>
    </div>
    <div class="col-4">
      <img src="../img/wyh.jpg" class="a3">
      <h6>王宇豪</h6>
      <span>山姆是维加诺的创始人兼首席执行官。</span>
    </div>
    <div class="col-4">
      <img src="../img/lcw.jpg" class="a3">
      <h6>李晨威</h6>
      <span>山姆是维加诺的创始人兼首席执行官。</span>
    </div>
  </div>
</div>

</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tbalefff:{
        name:'',
        sex:'',
        idCard:'',
        phoneNumber:'',
        password:'',
        email:'',
        age:''
      },
      aaaa:false,
      cc:false,
      cca:false,
      ccb:false,
      cce:false,
      ccf:false,
      ccg:false,
      cch:false,
      cci:false,
    }
    
  },
    methods:{
     getProjectNum(){
       const projectTime=new Date()
       const Year=projectTime.getFullYear()
       const Month=projectTime.getMonth()+1
       const Day=projectTime.getDate()
       var CurrentDate=Year
       if(Month>=10){
         CurrentDate+=Month
       }else{
         CurrentDate+='0'+Month
       }
       if(Day>=10){
          CurrentDate+=Day
       }else{
         CurrentDate+='0'+Day
       }
       return CurrentDate
     },
  blockornone(id){
    if(id=="login"){
    document.getElementById("b2").style.display='block'
    document.getElementById("b1").style.display='none'
    }
    if(id=="zhuce"){
      document.getElementById("b1").style.display='block'
      document.getElementById("b2").style.display='none'
    }
  },
  loginshow(){
    axios.post("http://localhost:8085/logindenglu",{name:this.$store.state.Login.name,password:this.$store.state.Login.password}).then((response) => {
          if(response.data!=""){
            alert("登录成功")
           this.$store.commit("Tmembershow",response.data)   
            // location.href="home"
            this.$router.push('/home')
          }else{
            alert("登录失败")
          }
    })
  },
  loginzhuce(){
    if(this.tbalefff.name=="" || this.tbalefff.idCard=="" || this.tbalefff.age=="" || this.tbalefff.email=="" || this.tbalefff.phoneNumber==""){
        alert("请根据提示填好信息")
        return false;
    }else{
      axios.post("http://localhost:8085/loginzhuce",{name:this.tbalefff.name,fileNumber:this.getProjectNum()+Math.floor(Math.random()*1000),age:this.tbalefff.age,sex:this.tbalefff.sex,idCard:this.tbalefff.idCard,phoneNumber:this.tbalefff.phoneNumber,password:this.tbalefff.password,email:this.tbalefff.email}).then((response) => {
          if(response.data){
              alert("注册成功")
              this.tbalefff=""
          }
    })
    }
  },
  blur(){
    if(this.tbalefff.idCard.length<18){
      this.ccg=true
      return false;
    }
    if(this.tbalefff.idCard.length==18){
      this.ccg=false
    }
    if(this.tbalefff.idCard!=""){
        this.cca=false
    }
    if(this.tbalefff.idCard==""){
        this.cca=true
        return false;
    }else{
      axios.post("http://localhost:8085/zhuceyanzhen",{idCard:this.tbalefff.idCard}).then((response) => {
          if(response.data!=""){
              alert("该身份证已注册")
          }
    })
    }
    
  },
  name(){
    if(this.tbalefff.name==""){
      this.cc=true
      return false;
    }
    if(this.tbalefff.name!=""){
      this.cc=false
    }
  },
  phoneNumber(){
    if(this.tbalefff.phoneNumber.length<11){
      this.cch=true
      return false;
    }
    if(this.tbalefff.phoneNumber.length==11){
      this.cch=false
    }
    if(this.tbalefff.phoneNumber==""){
      this.ccb=true
      return false;
    }
    if(this.tbalefff.phoneNumber!=""){
      this.ccb=false
    }
  },
  age(){
    if(this.tbalefff.age==""){
      this.cce=true
      return false;
    }
    if(this.tbalefff.age!=""){
      this.cce=false
    }
    if(this.tbalefff.age<=0){
      this.cci=true
      return false;
    }
    if(this.tbalefff.age>0){
      this.cci=false
    }
  },
  email(){
    if(this.tbalefff.email==""){
      this.ccf=true
      return false;
    }
    if(this.tbalefff.email!=""){
      this.ccf=false
    }
  }
}
}
</script>

<style>
.carousel-control-prev{
  width: 30px;
  height: 50px;
  margin-top: 10%;
  margin-left: 2%;
  background-color:gray;
}
.carousel-control-next{
  width: 30px;
  height: 50px;
  margin-top: 10%;
  margin-right: 2%;
  background-color:gray;
}
.a{
  margin-top: 1%;
  margin-left: 90%;
}
#a1{
width: 35px;
height: 40px;
}
#a2{
  margin-top: 2%;
}
.col-4{
  margin: 0 110px;
}
.a3{
  width: 80px;
  height: 80px;
}
#b1{
  display: none;
}
el-span{
  color: red;
}
</style>